<template>
  <div>
    <div class="el-container">
      <el-aside :width="asideWidth"
                v-show="isCollapse"
                class="aside">
        <!--            <h5>默认颜色</h5>-->
        <el-menu
            default-active="1"
            class="el-menu-vertical-demo"
            :router="true">
          <el-submenu index="1">
            <template slot="title">
              <i class="el-icon-files"></i>
              <span>文章</span>
            </template>
            <el-menu-item index="1-1" :route="{path:'/map/articleList'}">
              <!--            <i class="el-icon-map-location"></i>-->
              <span>文章</span>
            </el-menu-item>
          </el-submenu>
          <el-submenu index="2">
            <template slot="title">
              <i class="el-icon-s-tools"></i>
              <span>工具</span>
            </template>
            <el-menu-item index="2-1" :route="{path:'/map/mymap'}">
              <i class="el-icon-map-location"></i>
              <span>地图</span>
            </el-menu-item>
            <el-menu-item index="2-2" :route="{path:'/map/maplist'}">
              <i class="el-icon-map-location"></i>
              <span>地图列表</span>
            </el-menu-item>
            <el-menu-item index="2-3" :route="{path:'/map/travel'}">
              <i class="el-icon-map-location"></i>
              <span>地图追踪</span>
            </el-menu-item>
          </el-submenu>

          <el-submenu index="3">
            <template slot="title">
              <i class="el-icon-files"></i>
              <span>文件管理</span>
            </template>
            <el-menu-item index="3-1" :route="{path:'/map/fileupload'}">
              <!--            <i class="el-icon-map-location"></i>-->
              <span>文件上传</span>
            </el-menu-item>
            <el-menu-item index="3-2" :route="{path:'/map/filelist'}">
              <!--            <i class="el-icon-map-location"></i>-->
              <span>文件列表</span>
            </el-menu-item>
          </el-submenu>
        </el-menu>

      </el-aside>
      <el-container class="el-container">
        <el-header style="font-size: 12px">
          <span style="line-height: 60px;">
<!--            @click="asideWidth = asideWidth==='0'?'auto':'0'"-->
            <el-button
                @click="isCollapse = !isCollapse"
                :icon=" isCollapse?'el-icon-s-fold':'el-icon-s-unfold'">
            </el-button>
          </span>
          <span style="float:right">
<!--            登录状态-->
<!--            <el-dropdown
                v-if="isLogin"
                @command="handleCommand">
              <span style="height: 60px">
                <el-avatar
                    style="height:40px;width: 40px;margin-top: 10px"
                    :src="headerAvatar"
                alt="头像">
                </el-avatar>
              </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item style="font-size: 16px" command="logout">登出</el-dropdown-item>
                <el-dropdown-item style="font-size: 16px" command="set">设置</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>-->
            <span
                v-if="isLogin"
                style="line-height: 60px;">


              <el-button
                  circle
                style="font-size: 16px;float: right;margin: 8px"
                icon="el-icon-back"
                @click="logout">
              </el-button>
              <span style="height: 60px"
                    @click="set">
                <el-avatar
                    style="height:40px;width: 40px;margin-top: 10px"
                    :src="headerAvatar"
                    alt="头像">
                </el-avatar>
              </span>
            </span>

<!--            没有登录-->
            <span v-else
                  style="height: 60px"
                  @click="login">
              <el-avatar
                  style="height:40px;width: 40px;margin-top: 10px"
                  :src="loginImg">
              </el-avatar>
            </span>
          </span>
        </el-header>
        <el-main id="main">
              <router-view></router-view>
        </el-main>
      </el-container>
    </div>
    <Footer/>
  </div>
</template>

<script>
// @ is an alias to /src
import HelloWorld from '@/components/HelloWorld.vue'


import {mapState,mapGetters} from 'vuex'
import userinfo from "@/store/userinfo/userinfo";
import Login from "@/views/userInfo/Login";
import Footer from '@/views/Footer.vue'
import Set from "@/views/set/set";
import {requestIsSuccess} from "@/api/request";
export default {
  name: 'HomeView',
  components: {
    HelloWorld,Footer
  },
  data(){
    return{
      isCollapse: false,
      asideWidth:'auto'
    }
  },computed:{
    ...mapState({
      user:(state)=>state.user.userInfo
    }),
    ...mapGetters({
      headerAvatar:'avatar',
      isLogin:'isLogin'
    }),
    loginImg(){
      return require('@/assets/login.png')
    }
  },created() {
    // this.$store.dispatch('getUserInfo');
  },methods:{
    handleCommand(command){
      switch (command) {
        case 'logout':
          this.logout();
          break;
        case 'set':
          this.set();
          break;
      }
    },
    logout(){
       this.$store.dispatch('logout').then(result=>{
        if(requestIsSuccess(result)){
          this.$router.push(Login)
        }
      })
    },
    login(){
      this.$router.push('/login')
    },
    set(){
      this.$router.push('/set')
    }
  }
}
</script>
<style scoped>
#main{
  //height: 100%;
  padding: 10px 10px 40px 10px;
}
.el-header {
  background-color: #B3C0D1;
  color: #333;
  line-height: 60px;
}
.aside{
  overflow: hidden;
}

</style>
